<template>
	<view class="main">
		<!-- <view class="head" @click="getUserProfile"> -->
		<view class="head" @click="phonevar">
			<image :src="header" class="imgHead" mode="widthFix"></image>
			<view class="self">
				<view class="na">{{ name }}</view>
				<!-- <view class="ph"> -->
				<image src="../../static/huangjing.png" class="imgEnter" mode="widthFix"></image>
				<!-- </view> -->
			</view>
			<view class="daren">
				<image class="imgInvite" src="../../static/yq.png" mode=""></image>
				<view class="invite">邀请达人</view>
			</view>
		</view>
		<view class="th">
			<view class="mo" v-for="(item, index) in list" :key="item.id" @click="mess(item.id)">
				<view class="shu">
					<image style="width: 60rpx; height: 60rpx" :src="item.img" mode="widthFix"></image>
				</view>
				<view class="tex">{{ item.name }}</view>
				<view class="" v-if="item.price" style="color: #3681f3">￥{{ item.price }}</view>
			</view>
		</view>

		<view class="my">
		
			<view class="mk" @click="onskip('/pages/newPages/myCollect')">
				<button class="btn" style="text-align: left">我的收藏</button>
				<image src="../../static/gengduo.png" mode=""></image>
			</view>
			<view class="mk">
				<button class="btn" style="text-align: left">进达人群</button>
				<image src="../../static/gengduo.png" mode=""></image>
			</view>
			<view class="mk">
				<button open-type="im" data-im-id="接入客服的抖音号" @im="imCallback" @error="onimError" class="btn" style="text-align: left">联系客服</button>
				<image src="../../static/gengduo.png" mode=""></image>
			</view>
			
			<view class="mk">
				<button class="btn" style="text-align: left">常见问题</button>
				<image src="../../static/gengduo.png" mode=""></image>
			</view>
			<view class="mk">
				<button class="btn" style="text-align: left">退出登录</button>
				<image src="../../static/gengduo.png" mode=""></image>
			</view>
		</view>
		<!-- 手机号获取验证码 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content">
				<!-- 自定义表单校验 -->
				<view class="phoenTop" style="text-align: center; margin: 20rpx;">手机号验证</view>
				<uni-forms ref="baseForm" :modelValue="baseFormData">
					<uni-forms-item label="电话" required>
						<uni-easyinput v-model="baseFormData.phone" type="number" maxlength="11" placeholder="请输入电话号码" />
					</uni-forms-item>
					<uni-forms-item label="验证码" required>
						<view class="" style="display: flex;">
							<uni-easyinput v-model="baseFormData.varCode" style="width: 300rpx;margin-right: 20rpx;" placeholder="请输入验证码" /> 
							<view class="" style="border: #3681f3 solid 1rpx; text-align: center;border-radius: 5rpx; padding-top: 10rpx;" v-if="showVar" @click="getvarCode">获取验证码</view>
							<view class="" style="border: #3681f3 solid 1rpx; text-align: center;border-radius: 5rpx; padding-top: 10rpx; width: 80rpx; display: flex;" v-else>
								<uni-countdown :second="60" @timeup="timeup"></uni-countdown> <text>s</text>
							</view>
						</view>
					</uni-forms-item>
				</uni-forms>
				
				<button @click="conf" data-eventsync="true" style="background-color: #3681f3;color: #fff;">确定</button>
			</view>
			
			
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			code: '',
			anonymous_code: '',
			name: '请登录',
			header: '',
			phone: '',
			verification:'',
			id: 0,
			price: 20,
			showVar:true,
			diaodian_shouyi:'',//钓点收益
			fensi_yinliu:'',//粉丝引流
			yaoqing_shouyi:'',//邀请收益
			states:'',
			baseFormData: {
				phone:'',
				varCode:'',
				name: '',
				age: '',
				introduction: '',
				sex: 2, 
				hobby: [5],
				datetimesingle: 1627529992399
			},
			list: [
				{ id: 1, name: '钓点收益', img: '../../static/my/diaodian.png', price: 20 },
				{ id: 2, name: '邀请收益', img: '../../static/my/yaoqing.png', price: 20 },
				{ id: 3, name: '总收益', img: '../../static/my/fensi.png', price: 20 },
				{ id: 4, name: '入驻赚钱', img: '../../static/my/ruzhu.png' },
				{ id: 5, name: '新手教程', img: '../../static/my/xinshou.png' },
				{ id: 6, name: '添加桌面', img: '../../static/my/zhuomian.png' }
			]
		};
	},
	onLoad() {
		var obj = uni.getStorageSync('authInfo');
		this.name = obj.nikeName;
		this.header = obj.avatar;
		
		console.log('11', obj, this.name);
		this.mydata()
		// this.$api.post("my/usercenter").then(res =>{
		// 	console.log('我的111',res)
		// })
	},
	onShow() {},
	
	methods: {
		
		imCallback: function(e) {
			console.log("跳转IM客服成功", e.detail);
		},
		onimError: function(e) {
			console.log("拉起IM客服失败", e.detail);
		},
		mess(id){
			if(id == 4){
				uni.navigateTo({
					url:"/pages/index/enter"
				})
			}
		},
		// 我的
		mydata(){
			this.$api.post("my/usercenter").then(res =>{
				console.log('我的111',res)
				if(res.status == -1){
					this.states = res.status
					uni.showToast({
						title:res.msg
					})
				}else{
					// console.log('my111',res)
					this.name = res.userinfo.nickname
					this.header = res.userinfo.headimg
					this.list.forEach((item,index) =>{
						if(item.id == 1){
							console.log('item.id=111',res.userinfo.diaodian_shouyi)
							item.price = res.userinfo.diaodian_shouyi
						}
						if(item.id == 2){
							console.log('item.id=222',res.userinfo.yaoqing_shouyi)
							item.price = res.userinfo.yaoqing_shouyi
						}
						if(item.id == 3){
							console.log('item.id=333',res.userinfo.fensi_yinliu)
							item.price = res.userinfo.fensi_yinliu
						}
					})
					
				}
			})
		},

		
		
		// 提交
		submit(){
			
		},
		// 倒计时结束
		timeup(){
			this.showVar = true
		},
		// 获取验证码
		getvarCode(){
		
			let data = {}
			data.tel = this.baseFormData.phone
				console.log('获取验证码',this.baseFormData.phone,data)
			this.$api.post('pub/sendsms',{
				tel:this.baseFormData.phone
			}).then(res =>{
				console.log('验证码',res)
				uni.showToast({
					title: res.msg
				});
				this.showVar = false
			})
		},
		conf(){
			this.getUserProfile()
			// this.loginF()
			// this.mydata()
			this.$refs.popup.close()
			console.log('conf',this.baseFormData.phone,this.baseFormData.varCode)
		},
		// 修改头像昵称
		editInfo(){
			this.$api.post("my/editinfo",{nickname:this.nickname,headimg:this.headimg}).then(res =>{
				console.log('修改头像名称111',res)
			})
		},
		// 手机号验证登录
		phonevar(){
			console.log('手机号验证码')
			if(uni.getStorageSync('session_id') && uni.getStorageSync('token') && this.states != -1){
				return
			}
			if(this.verification == ''){
				this.$refs.popup.open('center')
			}
		},
		
		// 登录授权
		
		getUserProfile() {
			let that = this;
			let obj = {};
			
			uni.login({
				//uni,tt 都行
				force: true,
				provider: 'toutiao',
				success: function (loginRes) {
					console.log('code', loginRes.code, loginRes); //获取code
					that.code = loginRes.code;
					that.anonymous_code = loginRes.anonymousCode;
					// that.name
				}
			});
			uni.getUserProfile({
				success: (res) => {
					if (that.code) {
						obj = {
							//组装后台登录接口所需数据 姓名，电话，avatarUrl code
							niceName: res.userInfo.nickName,
							encryptedMobile: 15869696363,
							avatarUrl: res.userInfo.avatarUrl,
							code: that.code
						};
					}
					console.log('authinfo', res);
					uni.setStorageSync('authInfo', res.userInfo);

					if (res) {
						console.log('调用登录接口', res);
						
						that.loginF(obj);
					}
				},
				fail: (err) => {
					console.log('err111', err);
				}
			});
		},

		loginF(obj) {
			//登录接口
			let that = this;
			console.log('code登录数据', obj.code,obj);
			uni.setStorageSync('nickname',obj.niceName)
			uni.setStorageSync('avatarUrl',obj.avatarUrl)
			// this.$api.post('/api/front/douyin/authorize/program/login',{
			this.$api
				.post('pub/login', {
					// avatarUrl: obj.avatarUrl,
					// encryptedMobile: obj.encryptedMobile,
					// niceName: obj.niceName
					// code: obj.code,
					code:this.baseFormData.varCode,//验证码
					tel:this.baseFormData.phone,//电话
				})
				.then((res) => {
					console.log('登录接口数据', res);
						// 保存 token
						uni.setStorageSync('session_id',res.session_id)
						uni.setStorageSync('nickname',obj.niceName)
						// uni.setStorageSync('token', res.data.token);
						this.name = uni.getStorageSync('nickname')
						
						// 保存用户信息到本地
						uni.setStorageSync('authInfo', res);
						that.name = res.nikeName;
						
						console.log('32', that.name, res);
						
						uni.showToast({
							title: '登录成功',
							icon: 'success',
							duration: 2000
						});
						this.mydata()
						console.log('调用我的数据111')
					// }
				})
				.catch((res) => {
					console.log('错误输出', res);
				});
		}
	},

	getId(id) {
		console.log('345', id);
		return id == 5 ? 'contact' : '';
	}
};
</script>

<style lang="scss">
.main {
	margin: 0 27rpx;
}
.imgInvite {
	width: 60rpx;
	height: 60rpx;
	background-color: #fff;
	border-radius: 0;
	margin-left: 20rpx;
}
.invite {
	font-size: 28rpx;
	text-align: center;
}
.daren {
	margin-left: 200rpx;
	margin-top: 30rpx;
}
.btn {
	text-align: left;
	width: 100%;
	background-color: #fff;
	padding: 0;
}
.imgEnter {
	width: 135rpx;
	height: 50rpx;
	margin-top: 20rpx;
}
.head {
	display: flex;
	margin-top: 120rpx;
	.imgHead {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 26rpx;
		// background-color: yellow;
	}
	.na {
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
		margin-top: 15rpx;
	}
	.ph {
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
		margin-top: 18rpx;
	}
}
.th {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30rpx 10rpx;
	margin-top: 44rpx;
}
.mo {
	// width: 200rpx;
	// height: 24rpx;
	font-weight: bold;
	font-size: 32rpx;
	color: #333333;
	// line-height: 32rpx;
	text-align: center;
	.tex {
		color: #999999;
		margin-top: 0rpx;
	}
}
.my {
	margin-top: 80rpx;
	margin: 80rpx 27rpx 0;
	background-color: #fff;
	padding: 0rpx 20rpx 0rpx;
	border-radius: 20rpx;
	.mk {
		margin-top: 27rpx;
		// padding: 15rpx 35rpx;
		display: flex;
		justify-content: space-between;
		text-align: left;
		height: 60rpx;
		// width: 200rpx;
		background-color: #fff;
		border: 1rpx solid transparent;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		image {
			margin-top: 20rpx;
		}
	}
	button::after {
		border: none;
	}
	button {
		text-align: left;
	}

	span {
		// font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}
	image {
		width: 11rpx;
		height: 20rpx;
	}
}
// 弹窗
@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.box {
		@include flex;
	}

	.button {
		@include flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
		// @include flex;
		// align-items: center;
		// justify-content: center;
		padding: 15px;
		// height: 50px;
		background-color: #fff;
		border-radius: 20rpx;
		width: 600rpx;
		// display: flex;
	}
	.phones{
		display: flex;
		>input{
			border: 1rps solid #909399;
		}
	}

	.popup-height {
		@include height;
		width: 200px;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-success {
		color: #fff;
		background-color: #e1f3d8;
	}

	.popup-warn {
		color: #fff;
		background-color: #faecd8;
	}

	.popup-error {
		color: #fff;
		background-color: #fde2e2;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.success-text {
		color: #09bb07;
	}

	.warn-text {
		color: #e6a23c;
	}

	.error-text {
		color: #f56c6c;
	}

	.info-text {
		color: #909399;
	}

	.dialog,
	.share {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.dialog-box {
		padding: 10px;
	}

	.dialog .button,
	.share .button {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		margin: 0;
		margin-top: 10px;
		padding: 3px 0;
		flex: 1;
	}

	.dialog-text {
		font-size: 14px;
		color: #333;
	}
</style>
